<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>订单详情 - 宠物邻里互助平台</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
    <style>
        :root {
            --primary-color: #FFF9C4;  /* 主色调：淡黄 */
            --secondary-color: #FFECB3; /* 辅助色：琥珀黄 */
            --light-bg: #FFFDE7;       /* 背景色：浅奶油色 */
            --text-dark: #5D4037;      /* 深棕色文字 */
            --text-light: #8D6E63;     /* 浅棕色文字 */
            --border-color: #FFE082;   /* 边框色 */
            --hover-color: #FFE082;    /* 悬停色 */
            --shadow-color: rgba(255, 213, 79, 0.2); /* 阴影色 */
        }

        body {
            background-color: var(--light-bg);
            font-family: 'Helvetica Neue', Arial, 'Microsoft YaHei', sans-serif;
        }

        .order-card {
            margin-top: 30px;
            box-shadow: 0 4px 12px var(--shadow-color);
            background-color: white;
            border-radius: 12px;
            border: 1px solid var(--border-color);
        }

        .order-card:hover {
            box-shadow: 0 8px 20px var(--shadow-color);
            transform: translateY(-2px);
            transition: all 0.3s ease;
        }

        .card-header {
            background-color: var(--primary-color);
            border-bottom: 1px solid var(--border-color);
        }

        .card-title {
            color: var(--text-dark);
            font-weight: 600;
        }

        .status-tag {
            display: inline-block;
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 14px;
            font-weight: 500;
        }

        .status-pending {
            background-color: rgba(255, 243, 224, 0.8);
            color: #FF9800;
            border: 1px solid #FFE0B2;
        }

        .status-approved {
            background-color: rgba(232, 245, 233, 0.8);
            color: #4CAF50;
            border: 1px solid #C8E6C9;
        }

        .status-rejected {
            background-color: rgba(255, 205, 210, 0.8);
            color: #F44336;
            border: 1px solid #FFCDD2;
        }

        .status-completed {
            background-color: rgba(227, 242, 253, 0.8);
            color: #2196F3;
            border: 1px solid #BBDEFB;
        }

        .card-subtitle {
            color: var(--text-dark);
            font-weight: 600;
        }

        strong {
            color: var(--text-dark);
            font-weight: 500;
        }

        .btn {
            border-radius: 20px;
            font-weight: 500;
            transition: all 0.3s ease;
        }

        .btn-secondary {
            background-color: var(--secondary-color);
            color: var(--text-dark);
            border-color: var(--border-color);
        }

        .btn-secondary:hover {
            background-color: #FFE082;
            transform: translateY(-2px);
            box-shadow: 0 4px 8px var(--shadow-color);
        }

        .btn-danger {
            background-color: #FFCDD2;
            color: #F44336;
            border-color: #FFCDD2;
        }

        .btn-danger:hover {
            background-color: #FFB7B7;
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(244, 67, 54, 0.2);
        }

        .btn i {
            margin-right: 6px;
        }

        .row {
            margin-bottom: 15px;
        }

        p {
            color: var(--text-light);
            margin-bottom: 8px;
        }

        hr {
            border-top: 1px solid var(--border-color);
        }
    </style>
</head>
<body>


<div class="container">
    <div class="order-card card">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h3 class="card-title">订单 #${order.order_id}</h3>
            <span class="status-tag status-${order.status.toLowerCase()}">${order.status}</span>
        </div>
        <div class="card-body">
            <h5 class="card-subtitle mb-4">寄养家庭信息</h5>
            <div class="row">
                <div class="col-md-6">
                    <p><strong>家庭名称:</strong> ${host.family_name}</p>
                    <p><strong>位置:</strong> ${host.location}</p>
                    <p><strong>服务类型:</strong> ${host.service_types}</p>
                </div>
                <div class="col-md-6">
                    <p><strong>环境描述:</strong> ${host.env}</p>
                    <p><strong>每日价格:</strong> ${host.price} 元/天</p>
                    <p><strong>提供者ID:</strong> ${host.user_id}</p>
                </div>
            </div>

            <hr class="my-4">

            <h5 class="card-subtitle mb-4">订单信息</h5>
            <div class="row">
                <div class="col-md-6">
                    <p><strong>宠物ID:</strong> ${order.pet_id}</p>
                    <p><strong>开始日期:</strong> ${order.start_date}</p>
                    <p><strong>结束日期:</strong> ${order.end_date}</p>
                </div>
                <div class="col-md-6">
                    <p><strong>服务类型:</strong> ${order.service_type}</p>
                    <p><strong>特殊要求:</strong> ${order.special_requirement}</p>
                    <p><strong>总价格:</strong> ${order.price} 元</p>
                    <p><strong>请求者ID:</strong> ${order.requester_id}</p>
                </div>
            </div>

            <hr class="my-4">

            <h5 class="card-subtitle mb-3">订单操作</h5>
            <div class="d-grid gap-2 d-md-flex justify-content-md-end">
                <a href="${pageContext.request.contextPath}/Hosts/list" class="btn btn-secondary me-md-2">
                    <i class="fas fa-arrow-left"></i> 返回寄养列表
                </a>
                <a href="${pageContext.request.contextPath}/order/List" class="btn btn-secondary me-md-2">
                    <i class="fas fa-arrow-left"></i> 立即结算
                </a>
                <a href="${pageContext.request.contextPath}/order/cancel/${order.order_id}" class="btn btn-danger">
                    <i class="fas fa-times"></i> 取消订单
                </a>

            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>